<template>
  <div class="selectCor">
    <div>
      <el-input class="searchInput"
                placeholder="请输入搜索内容"
                prefix-icon="el-icon-search"
                @blur="searchContentHandler"
                v-model="searchContent">
      </el-input>
      <el-button  class="searchFun" type="primary"  icon="el-icon-search" @click="search">搜索</el-button>
    </div>
    <div v-for="item in Course" style="margin-top: 40px">
        <div class="course">
          <div class="courseName">课程ID:{{item.id}}</div>
          <div class="courseName">课程名:{{item.name}}</div>
          <div class="courseTime">上课时间:{{item.week}}&nbsp;{{item.time}}</div>
          <div class="courseTec">任课教师:{{item.tname}}</div>
          <div class="courseLevel">年级:{{item.level}}</div>
          <div class="courseNum">课程容纳人数:   {{item.now_num}} / {{item.max_num}}</div>
          <div v-if="item.now_num===item.max_num" style="color: red">选课人数已满！</div>
          <div v-if="item.now_num!==item.max_num"><a href="javascript:void(0)" style="color: darkred" @click="applyCor(item.id,item.week,item.time)">申请</a></div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
      action(){
        this.findCourse()
        this.findStu()
      },
      findStu(){
        let _this=this
        this.$axios({
          method:"GET",
          url:"http://localhost/student/findByUsername/"+_this.username
        }).then(response => {
          _this.sid=response.data.id
        })
      },
      findCourse(){
        let _this=this
        this.$axios({
          method:"GET",
          url:"http://localhost/course/selectByStu"
        }).then(response => {
         _this.Course=response.data
        })
      },

      applyCor(cid,week,time){
        let _this=this
        this.$axios({
          method:"GET",
          url:"http://localhost/course/checkClass/"+_this.sid+"/"+week+"/"+time
        }).then(response => {
          if(response.data=='err'){
            this.$message({
              message: '选课时间冲突！',
              type: 'warning'
            });
          }
          if(response.data=='ok'){
            _this.$axios({
              method:"GET",
              url:"http://localhost/student_course/checkSelect/"+_this.sid+'/'+cid
            }).then(response => {
              if(response.data=='err')
              {
                this.$notify.error({
                  title: '错误',
                  message: '您已经提交过该课程的申请'
                });
              }
              if(response.data=='ok'){
                _this.$axios({
                  method:"GET",
                  url:"http://localhost/student_course/save/"+_this.sid+'/'+cid
                }).then(response => {
                  this.$notify({
                    title: '成功',
                    message: '已提交申请！',
                    type: 'success'
                  });
                })
              }
            })
          }

        })

      },
      search(){
        let _this=this
        this.$axios({
          method:"GET",
          url:'http://localhost/course/searchCor/'+_this.searchContent
        }).then(result => {
          _this.Course=result.data
        })
      },
    searchContentHandler(){
      if(this.searchContent==='') this.action();
    },

  },
  mounted() {
     this.username=this.$route.query.username
     this.action()

  },
  data() {
    return {
      Course:[],
      username:'',
      sid:'',
      searchContent:'',
    }
  },

}
</script>

<style scoped>
.selectCor{
  position: absolute;
  left: 150px;
  width: 89.9%;
  height: 800px;
  overflow-y: auto;

}
.course{
  margin-left: 300px;
  width: 400px;
  height: 150px;
  border-style:solid;
  border-width:1px;
  border-color: black;
  background-color: aquamarine;
  margin-top: 5px;
}
.courseName{
  padding-right: 280px;
  left: 30px;
}
.courseTec{
  padding-right: 260px;
  left: 30px;
  top:25px
}
.courseLevel{
  padding-right: 290px;
  left: 30px;
  top:50px
}
.courseNum{
  padding-right: 230px;
  left: 30px;
  top:75px
}
.searchInput{
  margin-top: 20px;
  width: 300px;
  margin-left: -190px;
}
.courseTime{
  margin-left: -200px;
}
</style>
